<template>
    <div class="container">
        <h3>设备管理</h3>
        <el-row style="margin-top:20px;">
            <el-col :span="7">
                <el-input placeholder="请输入关键词" v-model="searchName" style="width:300px;">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>

                    <el-button slot="append" @click="handleSearch">搜索</el-button>
                </el-input>
            </el-col>

            <el-button type="primary" v-if="!added" @click="add" style="float:right; margin-right: 10px">新增设备</el-button>
        </el-row>

        <el-table :data="tableData" border style="margin-top:20px;" ref="multipleTable"
            header-cell-class-name="table-header">
            <el-table-column prop="type" sortable label="设备类型"></el-table-column>
            <el-table-column prop="name" sortable label="设备名称"></el-table-column>
            <el-table-column prop="manufacturer" sortable label="设备品牌"></el-table-column>
            <el-table-column prop="serial" sortable label="设备序列号"></el-table-column>
            <el-table-column label="操作" width="250" align="center">
                <template slot-scope="scope">
                    <el-button type="text" v-if="scope.row.type.indexOf('土壤') != -1 || scope.row.type.indexOf('气象') != -1"
                        @click="handleCan(scope.$index, scope.row)">参数
                    </el-button>
                    <el-button type="text" v-if="!edit" @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button type="text" v-if="!check" @click="handleCheck(scope.$index, scope.row)">查看
                    </el-button>
                    <el-button type="text" v-if="!del" @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage"
            :total="total" @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>

        <el-dialog :title="'设备：' + dialogData.name" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <el-button type="primary" @click="getParamList">新增参数</el-button>
            <el-dialog :title="diaTitle" :visible.sync="dialogVisible1" width="30%" append-to-body
                :before-close="handleClose1">
                <el-form label-position="right" label-width="120px" :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item label="参数类型" prop="name">
                        <el-select v-model="form.name" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.paramName" :label="item.paramName"
                                :value="item.paramName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预警上限" prop="high">
                        <el-input v-model="form.high"></el-input>
                    </el-form-item>
                    <el-form-item label="预警下限" prop="low">
                        <el-input v-model="form.low"></el-input>
                    </el-form-item>
                    <el-form-item label="预警阈值单位" prop="unit">
                        <el-input v-model="form.unit"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </span>
            </el-dialog>
            <el-table :data="canData" height="250" border style="width: 100%;" header-row-class-name="tableHeader">
                <el-table-column label="序号">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="参数名称">
                </el-table-column>
                <el-table-column label="预警阈值">
                    <template slot-scope="scope">
                        {{ scope.row.low + '~' + scope.row.high }}
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="预警阈值单位">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editCan(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" type="primary">返 回</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { facility_findByList, facility_delete, facility_del, getParamList, getByEquId, saveThreshold } from "@/request/api"
export default {
    data() {
        return {
            total: 0,
            currentPage: 1,
            pagesize: 10,
            searchName: '',
            tableData: [],
            form: {},
            idx: -1,
            id: -1,
            boxCode: '',
            boxCode1: '',
            del: true,
            added: true,
            edit: true,
            check: true,
            action: '',
            dialogVisible: false,
            dialogVisible1: false,
            dialogData: {},
            canData: [
                {

                }
            ],
            diaTitle: '新增参数',
            options: [],
            form: {
                name: '',
                low: '',
                high: '',
                unit: '',
            },
            rules: {
                high: [
                    { required: true, message: '请输入预警上限', trigger: 'blur' },
                ],
                low: [
                    { required: true, message: '请输入预警下限', trigger: 'blur' },
                ],
                unit: [
                    { required: true, message: '请输入预警阈值单位', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请选择参数类型', trigger: 'change' }
                ],
            }
        };
    },
    created() {

    },
    mounted() {
        this.init();
        this.judgmentAuthority()
    },
    methods: {
        editCan(row) {
            this.form = row
            this.dialogVisible1 = true
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.form.compId = localStorage.getItem('companyId')
                    this.form.equId = this.dialogData.id
                    saveThreshold(this.form).then(res => {
                        console.log(res);
                        if (res.code == '200') {
                            this.getByEquId()
                            this.dialogVisible1 = false
                            this.$message.success('新增参数成功')
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleClose1() {
            this.$refs.ruleForm.resetFields();
            this.dialogVisible1 = false
        },
        handleClose() {
            this.dialogVisible = false
            this.dialogVisible1 = false
        },
        async getParamList() {
            this.dialogVisible1 = true
            let res = await getParamList('compId=' + localStorage.getItem('companyId') + '&devId=' + this.dialogData.id)
            if (res.code == '200') {
                this.options = res.data
            }
        },
        handleCan(i, row) {
            this.dialogData = row
            this.getByEquId()
        },
        getByEquId() {
            getByEquId('companyId=' + localStorage.getItem('companyId') + '&equId=' + this.dialogData.id).then(res => {
                if (res.code == '200') {
                    this.canData = res.data
                    this.dialogVisible = true
                    this.dialogVisible1 = false
                }
            })
        },
        add() {
            this.$router.push({
                path: '/facility/added'
            })
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.init()
        },
        init() {
            facility_findByList({ page: this.currentPage, name: this.searchName }).then((res) => {
                this.tableData = res.rows;
                this.total = res.total
            })
        },
        handleCheck(index, row) {
            this.$router.push({
                path: '/facility/check',
                query: {
                    id: row.id
                }
            });
        },
        //搜索
        handleSearch() {
            this.currentPage = 1
            this.init()
        },
        //跳转编辑页面
        handleEdit(index, row) {
            this.$router.push({
                path: '/facility/added',
                query: {
                    id: row.id
                }
            });
        },

        //删除
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                facility_delete(row.id).then((res) => {
                    this.$notify({
                        title: '提示',
                        message: '删除成功',
                        type: 'success',
                        duration: 1000
                    });
                    this.init();
                })
            });
        },

        //判定操作按钮显示
        judgmentAuthority() {
            var type = JSON.parse(localStorage.getItem('panduanzhuangtai'));
            type.map((item1) => {
                if (item1.name == '设备管理' && item1.children != null) {
                    for (var i = 0; i < item1.children.length; i++) {
                        if (item1.children[i].name == '新增') this.added = false;
                        if (item1.children[i].name == '编辑') this.edit = false;
                        if (item1.children[i].name == '查看') this.check = false;
                        if (item1.children[i].name == '删除') this.del = false;
                    }
                }
            });
        }

    }
}
</script>

<style scoped lang="less">
::v-deep .tableHeader th {
    background-color: rgba(64, 158, 255, 0.05) !important;
    color: rgba(0, 0, 0, 0.65);
}

/deep/ .upload-daoru {
    background: #eee;

    .el-upload {
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}

.el-table {
    margin-top: 20px;
}

.el-pagination {
    text-align: center;
}

.el-pagination {
    text-align: center;
}

.el-col {
    margin-bottom: 0;
}
</style>